<template>
    <div class="body">
        <div class="header">
            <p>异常预警</p>
        </div>
        <div class="content">
            <!-- 搜索框 -->
            <div class="search">
                <div class="searchBox">
                    <div class="search1">
                        <div>
                            <span style="font-size: 13px;">姓名：</span>
                            <el-input style="width:300px;" v-model="name" placeholder="请输入" size="large" />
                        </div>
                        <div>
                            <span style="font-size: 13px;">联系电话：</span>
                            <el-input style="width: 300px;" v-model="phoneNumber" placeholder="请输入" size="large" />
                        </div>
                    </div>
                    <div class="search2">
                        <div>
                            <span style="font-size: 13px;">性别：</span>
                            <el-select style="width: 300px;font-size: 13px;" v-model="sex" class="m-2" placeholder="请选择"
                                size="large">
                                <el-option style="font-size: 13px;" v-for="item in sexOptions" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>
                        </div>
                        <div>
                            <span style="font-size: 13px;">状态：</span>
                            <el-select style="width: 300px;" v-model="stated" class="m-2" placeholder="请选择" size="large">
                                <el-option style="font-size: 13px;" v-for="item in stateOptions" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>
                        </div>
                    </div>
                    <div class="search3">
                        <div>
                            <span style="font-size: 13px;">身份证号：</span>
                            <el-input style="width: 300px;" v-model="idCard" placeholder="请输入" size="large" />
                        </div>
                        <!-- 日期选择器 -->
                        <div>
                            <span class="demonstration" style="font-size: 13px;">上报日期：</span>
                            <el-date-picker style="width: 300px;" v-model="newDate" type="date" placeholder="请选择"
                                size="large" :disabled-date="disabledDate" value-format="YYYY-MM-DD" />
                        </div>
                    </div>
                </div>
                <!-- 提交，重置 -->
                <div class="searchBtn">
                    <el-button type="primary" @click="query" style="font-size: 13px;">查询</el-button>
                    <el-button style="font-size: 13px;" @click="reset">重置</el-button>
                </div>
            </div>
            <!-- 表格 -->
            <div class="form">
                <div class="formBtn">
                    <el-button @click="exportX" style="font-size: 13px;">EXCEL导出</el-button>
                </div>
                <div class="formTable">
                    <!-- :max-height="360" -->
                    <el-table :data="anomalyData" style="width: 100%;font-size: 13px;" :row-style="{ height: '45px' }"
                        height="250px" border table-layout="auto"
                        :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '45px' }">
                        <el-table-column align="center" prop="id" label="序号" />
                        <el-table-column align="center" prop="name" label="姓名" />
                        <el-table-column align="center" prop="nextClosepatientNum" label="次密人数" />
                        <el-table-column align="center" prop="sex" label="性别" />
                        <el-table-column align="center" prop="idCard" label="身份证号" />
                        <el-table-column align="center" prop="phoneNum" label="联系电话" />
                        <el-table-column align="center" prop="address" label="现居地" />
                        <el-table-column align="center" prop="status" label="状态" />
                        <el-table-column align="center" prop="exception" label="异常项" />
                        <el-table-column align="center" prop="registrationDate" label="上报日期" />
                        <el-table-column align="center" fixed="right" label="操作">
                            <template #default="scope">
                                <el-button link type="primary" size="default"
                                    @click="checkDetails(scope.row)">查看详情</el-button>
                                <!-- <el-button link type="primary" size="default ">转为确诊病例</el-button> -->
                                <el-button link type="primary" size="default"
                                    @click="deleteDate(scope.row)">转为确诊病例</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- <div class="paging">
                    <el-pagination style="font-size: 13px;" v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[100, 200, 300, 400]" background="background"
                        layout="total,  prev, pager, next,sizes, jumper" :total="400" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div> -->
                <div class="paging">
                    <!-- pager-count="4" 最大页码数 -->
                    <el-config-provider>
                        <el-pagination background layout="prev, pager, next" :total="anomalyData.length"
                            :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange" />
                    </el-config-provider>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
// ElConfigProvider 组件
import { useRouter } from 'vue-router';
import { ElConfigProvider } from 'element-plus'
import axios from '@/util/http'
import exportExcel from '@/util/Excel'
import { parseTime } from '@/util/date'
import { ElMessage } from 'element-plus'
import { defineComponent, ref, onBeforeMount, reactive, toRefs } from 'vue';
export default defineComponent({
    name: 'AnomalyAlerts',
    components: {
        ElConfigProvider,
    },
    setup() {
        //表格
        const state = reactive({
            anomalyData: [
            ] as any
        })
        onBeforeMount(() => {
            axios({
                method: 'get',
                url: 'abnormalwarning/findAll',
                params: {
                    currentPage: currentPage.value,
                    pageSize: pageSize.value
                }
            })
                .then((response) => {
                    state.anomalyData = response.data.data.data.list
                    console.log(response.data.data.data.list);

                })
        })
        //搜索框
        const newDate = ref('')
        const disabledDate = (time: Date) => {
            return time.getTime() > Date.now()
        }
        let name = ref('')
        const phoneNumber = ref('')
        const sex = ref('')
        const sexOptions = [
            {
                value: '男',
                label: '男',
            },
            {
                value: '女',
                label: '女',
            },
        ]
        const stated = ref('')
        const stateOptions = [
            {
                value: '监测中',
                label: '监测中',
            },
            {
                value: '已解除',
                label: '已解除',
            },
            {
                value: '检测中',
                label: '检测中',
            },
        ]
        const idCard = ref('')

        //查询
        const query = () => {
            axios({
                method: 'get',
                url: 'abnormalwarning/selectByName',
                params: {
                    currentPage: currentPage.value,
                    pageSize: pageSize.value,
                    name: name.value,
                    sex: sex.value,
                    idCard: idCard.value,
                    phoneNum: phoneNumber.value,
                    status: stated.value,
                    registrationDate: newDate.value
                }
            })
                .then((response) => {
                    state.anomalyData = response.data.data.data.list
                })
        }
        //重置
        const reset = () => {
            name.value = ''
            sex.value = ''
            idCard.value = ''
            phoneNumber.value = ''
            stated.value = ''
            newDate.value = ''
            axios({
                method: 'get',
                url: 'abnormalwarning/findAll',
                params: {
                    currentPage: currentPage.value,
                    pageSize: pageSize.value
                }
            })
                .then((response) => {
                    state.anomalyData = response.data.data.data.list
                    console.log(response.data.data.data.list);

                })
        }
        //查看详情
        const router = useRouter()
        const checkDetails = (row) => {
            let id = row.id
            router.push({ path: '/DetailInformation', query: { id } })
        }
        //转为确诊病例
        const deleteDate = (row) => {
            console.log(row.id);
            ElMessage({
                message: '已转为确诊',
                type: 'success',
            })
            axios({
                method: 'post',
                url: 'abnormalwarning/turnDiagnosis',
                params: {
                    id: row.id
                }
            })
                .then((response) => {
                    // state.anomalyData = response.data.data.data.list
                    console.log(response);

                })
        }

        //导出
        const titleArr = ['序号', '姓名', '次密人数', '性别', '身份证号', '联系电话', '现居地', '状态', '异常项', '上报日期']
        const exportX = () => {
            exportExcel(state.anomalyData, '异常预警表', titleArr,  'biao')
            console.log('成功');
        }
        //分页
        const currentPage = ref(1)
        const pageSize = ref(10)
        const handleSizeChange = () => {
        }
        const handleCurrentChange = (newPage: any) => {
            axios({
                method: 'post',
                url: 'district_sys_statistics/findabnormals',
            })
                .then((response) => {
                    state.anomalyData = response.data.data
                    console.log(response.data.data);
                })
        }

        /* 时间转换，将时间戳转换为y-m-d打印在页面  */
        // const formatterDate = (row) => {
        //     // console.log(JSON.stringify(row.registrationDate));
        //     return parseTime(JSON.stringify(row.registrationDate), '{y}-{m}-{d}')
        // }
        return {
            name,
            phoneNumber,
            sex,
            sexOptions,
            stated,
            stateOptions,
            idCard,
            newDate,
            disabledDate,
            //表格
            ...toRefs(state),
            //查询
            query,
            //重置
            reset,
            //查看详情
            checkDetails,
            //删除
            deleteDate,
            //导出
            exportX,
            //分页
            currentPage,
            pageSize,
            handleSizeChange,
            handleCurrentChange,
        }
    },
})
</script>
<style lang="less" scoped>
/deep/ .el-input_wrapper {
    font-size: 13px;
}

/deep/.el-input {
    font-size: 13px;
}

.body {
    width: 100%;
    height: 100%;
}

.header {
    width: 100%;
    height: 5%;
    font-size: 13px;
}

.content {
    width: 100%;
    height: 94%;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search {
    width: 100%;
    height: 32%;
    border: 1px solid rgb(225, 222, 222);
    border-radius: 5px;
    background: white;
}

.searchBox {
    display: flex;
    justify-content: center;
}

.search span {
    font-size: 14px;
}

.search1,
.search2,
.search3 {
    width: 30%;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-evenly;
    margin-right: 30px;
}

.search button {
    width: 100px;
    height: 40px;
    margin-left: 20px;
}

.searchBtn {
    margin-left: 120px;
}

//表格
.form {
    margin-top: 10px;
    width: 100%;
    height: 66%;
    border: 1px solid rgb(225, 222, 222);
    border-radius: 5px;
    background: white;
    // overflow-y: scroll;
}

.formBtn button {
    width: 120px;
    height: 40px;
    margin-left: 50px;
    margin-top: 30px;
}

.formTable {
    width: 93%;
    margin-top: 20px;
    margin-left: 50px;
}

.elBtn:hover {
    color: #a0cfff;
}

.elBtn {
    color: #409eff;
    // background-color: white;
}

//分页
.paging {
    margin-top: 30px;
    margin-bottom: 20px;
    margin-right: 50px;
    display: flex;
    justify-content: flex-end;
}
</style>
